<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 60px;
            height: 60px;
            display: block;
        }

        #txt {
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            //域的内容发生改变，一般用于文件选择器和下拉列表
            document.getElementById('x1').onchange = function () {
                console.log('选中');

            }
        }


        // 作用于文件选择器上时
        window.onload = function () {
            document.getElementById('txt').onchange = function () {
                // console.log(this.files[0]);//获取选择的文件数据
                document.getElementById('img').src = window.URL.createObjectURL(this.files[0]);
                // ---------------------------------//通过window.URL.createObjectURL方法将对象转换为地址对象
            }
        }
    </script>
</head>

<body>
    爱好： <input type="checkbox" id="x1" name="hobby"><label for="x1">睡觉</label>
    <br>
    <!-- 文件选择器(type=file),文件选择器默认只能选择一个文件，如果想要同时选择多个文件添加（multiple）属性 -->
    头像： <input type="file" name="" id="txt" multiple>
    <label for="txt">
        <img src="./默认头像.jpg" alt="" id="img">
    </label>
</body>

</html>